import React, { useState, useEffect } from "react";
import {
  Search,
  Swiper,
  Image,
  NavBar,
  Toast,
  ProductCard,
  Tag,
  Button,
} from "react-vant";
import axios from "axios";
import "./index.css";
const Index: React.FC = () => {
  const [value, setValue] = useState("");
  const [list, setList] = useState<any>([]);
  useEffect(() => {
    axios.get("/api/list").then((resp) => {
      console.log(resp.data.list);
      setList(resp.data.list);
    });
  }, []);
  const change = (value: any) => {
    axios.get("/api/search", { params: { value } }).then((resp) => {
      console.log(resp.data.items);
      setList(resp.data.items);
    });
  };
  return (
    <div>
      <div className="search">
        <div className="searchtop">
          <Search
            showAction
            actionText={<div onClick={() => change(value)}>搜索</div>}
            value={value}
            onChange={setValue}
            placeholder="请输入搜索关键词"
          />
          <div className="searchbtn">
            {list.length > 0 &&
              list.map((v: any) => (
                <div key={v.id}>
                  <ProductCard
                    price={v.price}
                    desc={v.word}
                    title={v.title}
                    thumb={v.img}
                    tags={
                      <>
                        <Tag plain type="danger" style={{ marginRight: 5 }}>
                          {v.hbq}
                        </Tag>
                      </>
                    }
                  />
                </div>
              ))}
          </div>
        </div>
      </div>
    </div>
  );
};
export default Index;
